<style lang="less">
@import "./HelloMap.less";
</style>
<template>
<div class="HelloMap">
    <van-cell class="search">
        <van-search v-model="pickObj.poiaddress" @input="searchKeyword" @focus="showsuggestion" :show-action="showcancel" placeholder="搜索地点" @cancel="onCancel" />
    </van-cell>
    <div id="container" class="containerOuter">
        <div class="marker">
            <i></i>
            <img :class="{bounceInDown:hasclass}" width="26px" height="36px" src="../assets/image/marker.png" />
        </div>
        <!-- 返回当前位置 -->
        <div class="go-back-pos">
            <i></i>
        </div>

        <div id="map-info">
            <!-- 比例尺 -->
            <div class="scale">200米</div>
            <div class="qqmap-text-logo"></div>
        </div>

        <div class="to-right">
            <!-- 缩放按钮 -->
            <a class="cbutton" id="btn-zoom">
                <i id="btn-zoom-in" class="icon-zoom-in" data-adtag="zoomin">+</i>
                <i id="btn-zoom-out" class="icon-zoom-out" data-adtag="zoomout">-</i>
            </a>
        </div>
    </div>
    <div v-if="suggestionshow" class="suggestion-wrap">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="searchKeyword">
            <van-cell class="cell_li" clickable v-for="(item,key) in suggestionlist.data" :key="key" @click="pantolocation(key,1)">
                <div class="poi-title">{{item.title}}</div>
                <div class="poi-address">{{item.address}}</div>
            </van-cell>
        </van-list>
    </div>
    <div id="info" class="info">
        <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="searchKeyword">
            <van-cell class="info_li" clickable v-for="(item,key) in nearbylist.data" :key="key" @click="pantolocation(key,2)">
                <div class="info-title">{{item.title}}</div>
                <div class="info-address">{{item.address}}</div>
                <i class="active" v-if="getabs([item.location.lat,item.location.lng,pickObj.latlng.lat,pickObj.latlng.lng])" style="display: inline-block;"></i>
            </van-cell>
        </van-list>
    </div>
</div>
</template>

<script>
import qqmap from "qqmap";
/* import {
    ajax
} from "@/libs/util"; */
export default {
    name: "HelloMap",
    data() {
        return {
            suggestionlist: [],
            showcancel: false,
            suggestionshow: false,
            nearbylist: [],
            locknearbylist: true,
            hasclass: false,
            loading: false,
            finished: false,
            loading2: false,
            finished2: false,
            searchService: null,
            markers: [],
            lock: false,
            key: "",
            map: new Object(),
            pickObj: {
                module: "locationPicker",
                latlng: {
                    lat: 39.916527,
                    lng: 116.397128
                },
                poiaddress: "",
                poiname: "",
                cityname: ""
            }
        };
    },
    created() {
        this.key = this.config.key;
        this.pickObj.poiaddress = this.getQueryStr("location") ? this.getQueryStr("location") : this.pickObj.poiaddress;
        this.pickObj.latlng.lat = this.getQueryStr("lat") ? this.getQueryStr("lat") : this.pickObj.latlng.lat;
        this.pickObj.latlng.lng = this.getQueryStr("lng") ? this.getQueryStr("lng") : this.pickObj.latlng.lng;
    },
    mounted() {
        let othis = this;
        othis.init();
    },
    methods: {
        init() {
            let othis = this;
            qqmap.init(othis.key, () => {
                let center = new qq.maps.LatLng(othis.pickObj.latlng.lat, othis.pickObj.latlng.lng);
                othis.map = new qq.maps.Map(document.getElementById("container"), {
                    draggable: true,
                    disableDoubleClickZoom: true,
                    disableDefaultUI: true,
                    center: center,
                    zoom: 15
                });
                othis.setcenter();
                qq.maps.event.addListener(othis.map, "center_changed", function () {
                    othis.setcenter();
                });
                qq.maps.event.addListener(othis.map, "dragend", function (event) {
                    othis.locknearbylist = true;
                });
            });
        },
        setcenter() {
            let othis = this;
            if (
                ((othis.hasclass = true),
                    setTimeout(function () {
                        othis.hasclass = false;
                    }, 500),
                    !othis.lock)
            ) {
                let center = othis.map.getCenter();
                othis.geocoder(center).then(res => {
                    othis.pickObj = res;
                    console.log(JSON.stringify(othis.pickObj));
                    window.parent.postMessage(othis.pickObj, "*");
                    if (othis.locknearbylist) {
                        othis.getnearby(res.latlng.lat + "," + res.latlng.lng);
                    }
                })
            }
        },
        pantolocation(key, type = 1) {
            let othis = this;
            let center = {};
            if (type == 1) {
                othis.locknearbylist = true;
                center = othis.suggestionlist.data[key].location;
                othis.suggestionshow = false;
            } else {
                othis.locknearbylist = false;
                center = othis.nearbylist.data[key].location;
            };
            othis.map.panTo(new qq.maps.LatLng(center.lat, center.lng));
        },
        getabs(arr) {
            return Math.abs(arr[0] - arr[2]) < 0.000009 && Math.abs(arr[1] - arr[3]) < 0.000009
        },
        onCancel() {
            this.showcancel = false;
            this.suggestionshow = false;
            this.loading = false;
            this.finished = false;
        },
        showsuggestion() {
            this.suggestionshow = true;
            this.showcancel = true;
            this.loading = false;
            this.finished = true;
        },
        hidesuggestion() {
            this.suggestionshow = false;
        },
        searchKeyword(keyword) {
            this.finished = false;
            keyword && this.getsuggestion(keyword);
        },
        getsuggestion(keyword) {
            let othis = this;
            let city = "";
            othis.ajax("https://apis.map.qq.com/ws/place/v1/suggestion", {
                    region: city,
                    keyword: keyword,
                    policy: 0,
                    output: "jsonp",
                    key: othis.key
                })
                .then(res => {
                    if (res && res.data && res.data.length) {
                        othis.suggestionlist = res;
                        othis.loading = false;
                        othis.finished = true;
                    }
                });
        },
        getnearby(LatLng) {
            let othis = this;
            let i = 1000;
            othis.ajax("https://apis.map.qq.com/ws/place/v1/search", {
                boundary: "nearby(" + LatLng + "," + i + ")",
                page_size: 20,
                page_index: 1,
                key: othis.key,
                output: "jsonp"
            }).then(res => {
                othis.nearbylist = res;
                othis.loading2 = false;
                othis.finished2 = true;
            });
        },
        geocoder: function (t) {
            let othis = this;
            return othis.ajax("https://apis.map.qq.com/ws/geocoder/v1", {
                location: t.lat + "," + t.lng,
                key: othis.key,
                output: "jsonp"
            }).then(e => {
                let o = e.result.formatted_addresses.recommend ? e.result.formatted_addresses.recommend : e.result.address_component.street,
                    a = e.result.address,
                    n = e.result.ad_info.city,
                    r = {
                        module: "locationPicker",
                        latlng: {
                            lat: t.lat,
                            lng: t.lng
                        },
                        poiaddress: a,
                        poiname: o,
                        cityname: n

                    };
                return r;
            });
        },
        getQueryStr(a) {
            let b = new RegExp("(^|&)" + a + "=([^&]*)(&|$)", "i");
            let c = window.location.search.substr(1).match(b);
            if (c != null) {
                return decodeURI(c[2]);
            }
            return null;
        },
        ajax(url, obj) {
            let othis = this;
            obj = Object.assign({
                    callbackQuery: "cb"
                },
                obj
            );
            return othis.$jsonp(url, obj).then(res => {
                return res;
            }).catch(err => {
                return err;
            });
        }
    }
};
</script>
